<template>
  <div class="add">
    <BaseDialog
      :title="isType === 'add' ? '新增' : '编辑'"
      width="1000px"
      v-model:visible="innerVisible"
      :renderDefaultFooter="false"
    >
      <MyForm
        v-model:formData="formData"
        v-model:columns="formColumns"
        :rules="rules"
        :labelWidth="72"
        :saveBtnLoading="saveBtnLoading"
        background="#fff"
        @submit="onSubmit"
        @cancel="innerVisible = false"
      >
      </MyForm>
    </BaseDialog>
    <fieldDialog
      v-if="fieldDialogVisible"
       v-model:visible="fieldDialogVisible"
      :fieldList="curFieldList"
      @onSubmit="handleSetTableLine"
    />
  </div>
</template>
<script setup lang="tsx">
import { ref, computed, onMounted, watch } from "vue";
import * as api from "@/api/index.js";
import i18n from "@/lang/index.js";
import { ElMessage } from "element-plus";
import fieldDialog from "./fieldDialog.vue";
const props = defineProps({
  visible: {
    type: Boolean,
  },
  currRow: {
    type: Object,
    default: () => null,
  },
  isType: {
    type: String,
    default: "add",
  },
});
const emits = defineEmits(["update:visible", "onSubmit"]);
const innerVisible = computed({
  get() {
    return props.visible;
  },
  set(val) {
    emits("update:visible", val);
  },
});
const fieldDialogVisible = ref(false);
const curFieldList = ref([]);
const curFieldIndex = ref("");
const formData = ref({
  fieldList: [],
});
const formColumns = ref([
  {
    title: "",
    structure: [
      {
        formLayout: "el-row",
        content: [
          {
            label: "模块编码",
            prop: "code",
            type: "label_input",
            span: 8,
            disabled: props.isType !== "add",
          },
          {
            label: "模块名称",
            prop: "name",
            type: "label_input",
            placeholder: "请输入模块名称",
            span: 8,
          },
          {
            label: "功能名称",
            prop: "functionName",
            type: "label_input",
            placeholder: "请输入功能名称",
            span: 8,
          },
          {
            label: "备注",
            prop: "textarea",
            type: "label_input",
            inputType: "textarea",
            span: 24,
          },
        ],
      },
    ],
  },
  {
    title: "",
    structure: [
      {
        type: "tabel",
        tableId: "fieldList",
        tableIndex: 0,
        prop: "fieldList",
        keepSourceKey: "fieldName",
        height: 400,
        columns: [
          {
            type: "checkbox",
            width: 50,
            fixed: "left",
            align: "center",
          },
          {
            title: "字段名称",
            field: "fieldName",
            editRender: {},
            slots: { edit: "input_edit" },
          },
          {
            title: "字段编码",
            field: "fieldCode",
            editRender: {},
            slots: { edit: "input_edit" },
          },
          {
            title: "字段类型",
            field: "type",
            editRender: {},
            params: {
              options: [
                { label: "字段", value: "1" },
                { label: "集合", value: "2" },
              ],
              transfer: true,
            },
            slots: { edit: "select_edit" },
            formatter: ({ cellValue }) => {
              const obj = {
                1: "字段",
                2: "集合",
              };
              return obj[cellValue] || "";
            },
          },
          {
            field: "remark",
            editRender: {},
            slots: { edit: "input_edit" },
            title: "备注",
          },
          {
            field: "controlBtn",
            title: "操作",
            width: 100,
            align: "center",
            fixed: "right",
            slots: {
              // 使用 JSX 渲染
              default: ({ row, rowIndex }) => {
                return [
                  <div>
                    {row.type === "2" ? (
                      <el-button
                        icon="Setting"
                        circle
                        title={i18n.global.t("字段详细配置")}
                        type="warning"
                        plain
                        onClick={() => onSetTableLine(row, rowIndex)}
                      ></el-button>
                    ) : (
                      ""
                    )}
                  </div>,
                ];
              },
            },
          },
        ],
        editRules: {
          fieldName: [
            {
              required: true,
              message: i18n.global.t("请输入字段名称"),
              trigger: ["blur"],
            },
          ],
          fieldCode: [
            {
              required: true,
              message: i18n.global.t("请输入字段编码"),
              trigger: ["blur"],
            },
          ],
          type: [
            {
              required: true,
              message: i18n.global.t("请选择字段类型"),
              trigger: ["blur"],
            },
          ],
        },
        multipleSelection: [],
        buttonType: ["add", "delete"],
        batchDelete: true,
      },
    ],
    hide: false,
  },
]);
const rules = ref({
  code: [
    {
      required: true,
      message: i18n.global.t("请输入模块编码"),
      trigger: "change",
    },
  ],
  name: [
    {
      required: true,
      message: i18n.global.t("请输入模块名称"),
      trigger: "change",
    },
  ],
  functionName: [
    {
      required: true,
      message: i18n.global.t("请输入功能名称"),
      trigger: "change",
    },
  ],
});
const saveBtnLoading = ref(false);
onMounted(() => {
  if (props.isType === "edit") {
    getInfo();
    return;
  }
});
const getInfo = async () => {
  saveBtnLoading.value = true;
 try{
   const { data } = await api.default.common.fieldConfiguration.getInfo(
    props.currRow.id
  );
  formData.value = {
    ...data,
  };
  saveBtnLoading.value = false;
 }catch(err){
  saveBtnLoading.value = false;
 }
};

const onSetTableLine = (row, rowIndex) => {
  fieldDialogVisible.value = true;
  curFieldList.value = row.fieldList;
  curFieldIndex.value = rowIndex;
};
const handleSetTableLine = (row) => {
  formData.value.fieldList[curFieldIndex.value].fieldList = row;
  fieldDialogVisible.value = false;
}
const onSubmit = () => {
  const parmas = {
    ...formData.value,
  };
  if (props.isType === "add") {
    // 新增
    saveBtnLoading.value = true;
    api.default.common.fieldConfiguration
      .add({
        ...parmas,
      })
      .then(() => {
        ElMessage.success("新增成功");
        innerVisible.value = false;
        saveBtnLoading.value = false;
        emits("onSubmit");
      })
      .catch(() => {
        saveBtnLoading.value = false;
      });
  } else {
    // 编辑
    saveBtnLoading.value = true;
    api.default.common.fieldConfiguration
      .edit(parmas)
      .then(() => {
        ElMessage.success("修改成功");
        innerVisible.value = false;
        saveBtnLoading.value = false;
        emits("onSubmit");
      })
      .catch(() => {
        saveBtnLoading.value = false;
      });
  }
};
</script>
<style lang="scss" scoped>
.search-btn {
  width: 120px;
  margin: 20px auto 0;
}
</style>
